<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- 定义模板 -->
    <div id="app">
      <div id="test">el的模板{{count}}</div>
      <button @click="++count">按钮</button>
      <button @click="$destroy()">卸载</button>
    </div>

    <!-- 引入vue.js -->
    <script src="./vue.js"></script>

    <!-- 创建vue实例,绑定模板 -->
    <script>
      const vm = new Vue({
        el: '#app',
        // 注意: 创建vue实例的时候,可以写template,但是实际开发一般不写
        // 因为template的作用是覆盖el所对应的模板
        // template: `<h1>template的模板{{count}}</h1>`,
        data: {
          count: 1,
        },
        // 初始化阶段
        beforeCreate() {
          // 此时实例上没有数据
          console.log('即将开始初始化数据', this.count)
        },
        created() {
          // 此时实例上已经有数据了
          console.log('初始化数据完毕', this.count)
        },
        beforeMount() {
          // 实例和模板还没有绑定完成
          console.log('即将开始挂载', document.getElementById('test'))
        },
        mounted() {
          // 实例和模板已经绑定完成并渲染完毕
          console.log('挂载完毕', document.getElementById('test'))
        },
        beforeUpdate() {
          // 数据是新的,但是结构是旧的
          console.log(
            '即将更新',
            this.count,
            document.getElementById('test').innerText
          )
        },
        updated() {
          // 数据和结构都是新的
          console.log(
            '更新完毕',
            this.count,
            document.getElementById('test').innerText
          )
        },
        beforeDestroy() {
          // 此时响应式还在,但是马上就没有响应式了.数据还在

          console.log(
            '即将卸载-实例上数据还在,响应式也还在',
            this.count,
            document.getElementById('test').innerText
          )
        },
        destroyed() {
          // 响应式没有了.数据还在
          this.count = 100
          console.log(
            '卸载完毕-实例上数据还在,响应式没有了',
            this.count,
            document.getElementById('test').innerText
          )
        },
      })
    </script>
  </body>
</html>
